<template>
  <div class="app-container">
    <div class="page-container">
      <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="姓名" prop="realName">
          <el-input
            v-model="queryParams.realName"
            placeholder="请输入姓名"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="queryParams.phone"
            placeholder="请输入手机号"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="入住时间" style="width: 308px">
          <el-date-picker
            v-model="daterangeCreateTime"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="houseRecordList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" align="center" type="index" width="50">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="realName" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="入住房号" align="center" prop="houseNum" />
        <!-- <el-table-column label="入住订单号" align="center" prop="recordNum" /> -->

        <el-table-column
          label="入住时间"
          align="center"
          prop="createTime"
          width="180"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="离店时间"
          align="center"
          prop="leaveTime"
          width="180"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.leaveTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="离店操作人"
          align="center"
          prop="leaveCreateName"
        />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="HouseRecord">
import { listHouseRecord } from '@/api/hotel/houseRecord'

const { proxy } = getCurrentInstance()

const houseRecordList = ref([])
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const daterangeCreateTime = ref([])

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    realName: null,
    idCard: null,
    phone: null,
    createTime: null
  }
})

const { queryParams } = toRefs(data)

/** 查询入住记录列表 */
function getList() {
  loading.value = true
  if (
    daterangeCreateTime.value &&
    null != daterangeCreateTime.value &&
    '' != daterangeCreateTime.value
  ) {
    queryParams.value['beginCreateTime'] = daterangeCreateTime.value[0]
    queryParams.value['endCreateTime'] = daterangeCreateTime.value[1]
  } else {
    queryParams.value['beginCreateTime'] = null
    queryParams.value['endCreateTime'] = null
  }
  listHouseRecord(queryParams.value).then((response) => {
    houseRecordList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeCreateTime.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}

getList()
</script>
